<template>
    <div class="inputbox">
        <van-nav-bar
            title="新增"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <input type="text" placeholder="输入任务名称" v-model="inputText"> 
        <div @click="add" class="add">新增</div>
    </div>
</template>

<script setup>

    import {ref} from 'vue'
    import { useRouter } from 'vue-router'

    //从对应store的文件中导入
    import { useTasklistStore } from '../stores/tasklist'

    var inputText = ref('')
    var $router = useRouter()   //获取路由管理对象

    //调用 useTasklistStore 方法 获取store对象
    var store = useTasklistStore()

    //新增任务
    var add = ()=>{

        store.addTask(inputText.value);

        inputText.value = ''
    }
    
    var onClickLeft = () =>{
        $router.go(-1)
    }



</script>

<style scoped>
    .inputbox{
        padding: 10px;
        box-sizing: border-box;
        text-align: center ;
    }
    .inputbox input{
        width: 80%;
        height: 40px;
        border: 1px solid #ccc;
        outline: none;
        padding-left: 20px;
        border-radius: 5px;
    }
    .inputbox .add{
        margin:10px auto;
        width: 80px;
        height: 40px;
        background-color: aqua;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        color: rgb(33, 146, 216);
    }
</style>